<ul class="list">
    <li {{ configAuth }} title="Authentication">
        <label>
            <input data-name="js-auth" type="checkbox" {{ auth }} >
            Auth
        </label>
    </li>
    <li {{ configAuth }}>
        <input
            data-name="js-username"
            type="text"
            class="form-control"
            placeholder="username"
            value="{{ username }}"
            title="Username"
            autocomplete="username">
    </li>
    <li {{ configAuth }}>
        <input
            data-name="js-password"
            type="password"
            class="form-control"
            placeholder="password"
            value="{{ password }}"
            title="Password"
            autocomplete="current-password">
    </li>
    <li title="Should an Editor send patches to server (speed up data transfer)">
        <label>
            <input
                data-name="js-diff"
                type="checkbox"
                {{ diff }}>
            Diff
        </label>
    </li>
    <li title="Pack text data transferred by an Editor">
        <label>
            <input
                data-name="js-zip"
                type="checkbox"
                {{ zip }}>
            Zip
         </label>
    </li>
    <li title="Theme">
        <select data-name="js-theme" class="form-control full-width" title="Theme">
            <option {{ light-selected }}>light</option>
            <option {{ dark-selected }}>dark</option>
        </select>
    </li>
    <li title="Visible Columns">
        <select data-name="js-columns" class="form-control full-width" title="Visible Columns">
            <option {{ name-size-date-owner-mode-selected }}>name-size-date-owner-mode</option>
            <option {{ name-size-date-selected }}>name-size-date</option>
            <option {{ name-size-selected }}>name-size</option>
        </select>
    </li>
    <li title="Editor: Edward(Ace-based), Dword(Codemirror-based), Deepword(Monaco-based)">
        <select data-name="js-editor" class="form-control full-width" title="Editor">
            <option {{ edward-selected }}>edward</option>
            <option {{ dword-selected }}>dword</option>
            <option {{ deepword-selected }}>deepword</option>
        </select>
    </li>
    <li title="Navigate and edit files using hotkeys of legendary editor">
        <label>
            <input
                data-name="js-vim"
                type="checkbox"
                {{ vim }}>
            Vim
        </label>
    </li>
    <li title="Menu: supermenu, aleman">
        <select data-name="js-menu" class="form-control full-width" title="Menu">
            <option {{ aleman-selected }}>aleman</option>
            <option {{ supermenu-selected }}>supermenu</option>
        </select>
    </li>
    <li title="Inner buffer used to copy files">
        <label>
            <input data-name="js-buffer" type="checkbox" {{ buffer }}>
            Buffer
        </label>
    </li>
    <li title="Store filenames of directories (can be cleared with Ctrl+D and refreshed with Ctr+R)">
        <label>
            <input data-name="js-dirStorage" type="checkbox" {{ dirStorage }} >
            Directory Storage
        </label>
    </li>
    <li title="Load dependencies from CDN (faster, but requires internet)">
        <label>
            <input data-name="js-online" type="checkbox" {{ online }}>
            Online
        </label>
    </li>
    <li title="Packer support for pack operations">
        <select data-name="js-packer" class="form-control full-width" title="Packer">
            <option {{ tar-selected }}>tar</option>
            <option {{ zip-selected }}>zip</option>
        </select>
    </li>
    <li title="Show only one panel (when two is to many)">
        <label>
            <input data-name="js-oneFilePanel" type="checkbox" {{ oneFilePanel }}>
            One File Panel
        </label>
    </li>
    <li title="Show bottom keys panel">
        <label>
            <input data-name="js-keysPanel" type="checkbox" {{ keysPanel }}>
            Keys panel
        </label>
    </li>
     <li title="Name of Cloud Commander instance">
        <input
            data-name="js-name"
            title="Name"
            value="{{ name }}"
            placeholder="name"
            class="form-control">
    </li>
     <li title="Root directory">
        <input
            data-name="js-root"
            title="Root"
            value="{{ root }}"
            placeholder="root"
            class="form-control">
    </li>
    <li title="Port used by server">
        <input
            data-name="js-port"
            min="0"
            max="65535"
            title="Port"
            type="number"
            value="{{ port }}"
            placeholder="Port"
            class="form-control">
    </li>
    <li title="Show DotFiles">
        <label>
            <input data-name="js-showDotFiles" type="checkbox" {{ showDotFiles }}>
            Show DotFiles
        </label>
    </li>
    <li title="Show file name while Viewing a file">
        <label>
            <input data-name="js-showFileName" type="checkbox" {{ showFileName }}>
            Show File Name
        </label>
    </li>
    <li title="Confirm copy in Copy Dialog">
        <label>
            <input data-name="js-confirmCopy" type="checkbox" {{ confirmCopy }}>
            Confirm Copy
        </label>
    </li>
    <li title="Confirm move in Move Dialog">
        <label>
            <input data-name="js-confirmMove" type="checkbox" {{ confirmMove }}>
            Confirm Move
        </label>
    </li>
    <li title="Synchronize path of current directory with Console">
        <label>
            <input data-name="js-syncConsolePath" type="checkbox" {{ syncConsolePath }}>
            Sync Console Path
        </label>
    </li>
</ul>
